<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    作用：用来与键盘中按键事件绑定在一起,用来修饰特定的按键事件的修饰符。

    常用按键修饰符：@keyup.xxx="被执行的方法"
    .enter 回车键
    .tab  捕捉通过tab跳转到当前按标签
    .delete 删除键和退格键
    .esc Esc键
    .space 空格键
    .up ↑
    .down ↓
    .left ←
    .right →

    <!--enter按键修饰符, 在回车之后触发事件-->
    <input type="text" v-model="msg" @keyup.enter="keyups" placeholder="enter"><br>
    <!--当使用tab键切换到这个标签时触发-->
    <input type="text" @keyup.tab="tabups" placeholder="tab"><br>
    <input type="text" @keyup.delete="deleteups" placeholder="delete"><br>
    <input type="text" @keyup.esc="escups" placeholder="esc"><br>
    <input type="text" @keyup.space="spaceups" placeholder="space"><br>
    <input type="text" @keyup.up="ups" placeholder="up"><br>
    <input type="text" @keyup.left="lefts" placeholder="left"><br>
    <input type="text" @keyup.right="rights" placeholder="right"><br>
    <input type="text" @keyup.down="downs" placeholder="down"><br>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            msg: '',
        },
        methods: {
            keyups() { alert(this.msg); },
            tabups() { alert("tab键触发") },
            deleteups() { alert("delete键触发") },
            escups() { alert("esc键触发") },
            spaceups() { alert("space键触发") },
            ups() { alert("↑") },
            lefts() { alert("←") },
            rights() { alert("→") },
            downs() { alert("↓") },
        },
    });
</script>
</body>
</html>